<template>
  <div>
    <van-empty v-if="arr.length == 0" description="购物车空空，快去购物吧！" />
    <!-- 3.展示数据  -->
    <div class="con">
      <div class="item" v-for="item in arr" :key="item.id">
        <van-checkbox v-model="item.checked" checked-color="#ff4400" @change="changeOne"></van-checkbox>
        <van-swipe-cell>
          <van-card :title="item.goodsname" class="goods-card" :thumb="$pre + item.img">
            <div slot="num">
              <van-stepper v-model="item.num" @plus="plus(item.id)" @minus="sub(item.id)" />
            </div>
            <div slot="desc">{{ item.price | filterPrice }}</div>
            <div slot="price">¥{{ (item.price * item.num) | filterPrice }}</div>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)" />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <!-- 结算的栏目 -->
    <van-submit-bar :price="allPrice * 100" :button-text="`去结算(${select_num})件`" @submit="onSubmit">
      <van-checkbox v-model="allChecked" checked-color="#ff4400" @click="changeAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { reqcartlist, reqcartedit, reqcartdel } from "../../http/http";
import { Toast } from "vant";
export default {
  data() {
    return {
      arr: [],
      allChecked:false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      reqcartlist({
        uid: JSON.parse(localStorage.getItem("isLogin")).uid
      }).then(res => {
        let list = res.data.list ? res.data.list : [];
        // 计算选中状态
        list.forEach(item => {
          let obj = this.arr.find(i => i.id === item.id);
          item.checked = obj ? obj.checked : false;
        });

        this.arr = list;

        this.allChecked =
          this.arr.length > 0 ? this.arr.every(item => item.checked) : false;
      });
    },
    changeAll() {
      this.arr.forEach(item => (item.checked = this.allChecked));
    },
    changeOne() {
      this.allChecked = this.arr.every(item => item.checked);
    },
    plus(id) {
      reqcartedit({
        id: id,
        type: 2
      }).then(res => {
        if (res.data.code === 200) {
          Toast(res.data.msg);
          this.init();
        }
      });
    },
    sub(id) {
      reqcartedit({
        id: id,
        type: 1
      }).then(res => {
        if (res.data.code === 200) {
          Toast(res.data.msg);
          this.init();
        }
      });
    },
    del(id) {
      reqcartdel({
        id: id
      }).then(res => {
        if (res.data.code === 200) {
          Toast(res.data.msg);
          this.init();
        }
      });
    },
    onSubmit() {
      let obj = {
        countmoney: this.allPrice,
        countnumber: this.select_num,
        idstr:this.arr.filter((item)=>item.checked).map((item)=>item.id).join(",")
      };
      sessionStorage.setItem("toOrderInfo",JSON.stringify(obj))
      this.$router.push("/order");
    }
  },
  computed: {
    // 总价
    allPrice() {
      return this.arr.reduce(
        (val, item) => (item.checked ? val + item.price * item.num : val),
        0
      );
    },
    select_num() {
      return this.arr.reduce(
        (val, item) => (item.checked ? val + item.num : val),
        0
      );
    }
  }
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
.van-submit-bar {
  bottom: calc(0.8rem + 1px);
  border-top: 1px solid #ccc;
}
.con {
  height: calc(100vh - 0.8rem - 0.8rem - 54px);
  overflow-y: auto;
  .item {
    display: flex;
    background: #fafafa;
    .van-checkbox {
      width: 1rem;
      justify-content: center;
    }
    .van-swipe-cell {
      flex: 1;
    }
    .delete-button {
      height: 100%;
    }
  }
}
</style>